<template>
  <div class="hawkContent">
    <hawk-breadcrumb></hawk-breadcrumb>
    <el-row :gutter='20' style='padding-left:0 20px;'>
      <el-col :span='4' style="display:flex;align-items: center;">
        <span style="width:50px">名称</span>
        <el-input placeholder='请输入主机名称' v-model='queryForm.query.name'>
        </el-input>
      </el-col>
      <el-col :span='4' style="display:flex;align-items: center;">
        <span style="width:50px">状态</span>
        <el-select clearable v-model="queryForm.query.available" placeholder="请选择">
          <el-option v-for="item in statusOptions" :key="item.value"
                     :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span='4'>
        <el-button type='hawkSearch' @click='init'>搜索</el-button>
        <el-button plain @click='reSet'>重置</el-button>
      </el-col>
      <el-col :span='4'
              style='float: right;text-align: right;padding-right: 30px'>
      </el-col>
    </el-row>

 <!-- { key: 'networkImportTraffic', label: '网络进口流量' },
        { key: 'networkExitTraffic', label: '网络出口流量' }, -->

    <hawk-table :table-data="tableData" :page="queryForm.page" :selection="false" :options="[
        { key: 'name', label: '主机名称' },
        { key: 'ip', label: 'IP' },
        { key: 'available', label: '状态' },
        { key: 'cpuUtilization', label: 'cpu使用率' },
        { key: 'memoryRemainingCapacity', label: '内存剩余容量' },
        { key: 'cdiskUsage', label: 'C盘使用率' },

       

        { key: 'problemCount', label: '问题数量' },
        { key: 'handle', label: '操作' }
      ]">


       <template #problemCount="{ row }">
        <span class="host" >{{row.problemCount?row.problemCount:0}}</span>
      </template>


      <template #available="{row}">
        <span>{{row.available == 1?'可用':'不可用'}}</span>
      </template>

      <!-- cpu使用率 -->
      <template #cpuUtilization="{row}">
        <span>{{getContent(row,TYPE.cpu)}}</span>
      </template>
      <!-- 内存剩余容量 -->
      <template #memoryRemainingCapacity="{row}">
        <span>{{getContent(row,TYPE.memory_free) || getContent(row,TYPE.memory_avaiable)}}</span>
      </template>
      <!-- C盘使用率 -->
      <template #cdiskUsage="{row}">
        <span>{{getContent(row,TYPE.size_c_pfree)}}</span>
      </template>

      <template #handle="{ row }">
        <div class="btnDetail">
          <el-tag @click="editUser(row,0)" effect="dark" class="btnColor">详情
          </el-tag>

          <el-tag @click="editUser(row,1)" effect="dark" type="warning"
                  class="btnColor">趋势</el-tag>
        </div>
      </template>
    </hawk-table>

    <div class="bottom-btns">
      <el-pagination background @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="queryForm.page.current"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="queryForm.page.size"
                     layout=" prev, pager, next,sizes" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
/**
 * @author 韩玉龙
 * @description 主机列表的视图层
 * @api
 * @since
 * @update
 * @modifier 韩玉龙
 * @bug 无
 * @version v1.0.0
 */

import { getList } from '@/api/monitor/list/host'
import HawkTable from '@/components/table'
import HawkBreadcrumb from '@/components/breadcrumb/Breadcrumb'




export default {
  components: { HawkBreadcrumb, HawkTable },
  //import引入的组件需要注入到对象中才能使用",
  data () {
    //这里存放数据",
    return {
      formTitle: '添加主机',
      dialogVisible: false,
      multipleSelection: [],
      total: 0,
      queryForm: {
        query: {
          name: '',
          available: ''
        },
        page: {
          current: 1,
          size: 10
        },
      },
      statusOptions: [{
        value: '0',
        label: '正常'
      }, {
        value: '1',
        label: '异常'
      }, {
        value: '2',
        label: '未监控'
      }],
      addForm: {
        name: '',
        address: '',
        cpuing: '',
        memory: '',
        disk: '',
        network: '',
        problem: ''

      },
      addFormRules: {
        name: [
          { required: true, message: '请输入主机名', trigger: 'blur' },
          {
            min: 3,
            max: 20,
            message: '主机名的长度在3-20个字符之间',
            trigger: 'blur'
          }
        ]
      },
      //列名数据

      tableData: [],
      TYPE: {
        cpu: "system.cpu.util[,,]",
        memory_free: "vm.memory.size[free]",
        memory_pavailable: "vm.vmemory.size[pavailable]",
        memory_total: "vm.memory.size[total]",
        memory_avaiable: "vm.memory.size[available]",
        size_c_free: "vfs.fs.size[C:,free]",
        size_c_pfree: "vfs.fs.size[C:,pfree]",
        size_c_used: "vfs.fs.size[C:,used]",
        size_c_total: "vfs.fs.size[C:,total]",
        size_available: "vm.memory.size[available]",

      }
    }
  },
  //监听属性 类似于data概念",
  computed: {
    cellStyle () {
      return {
        padding: '8px 0'
      }
    }
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {

     //跳转问题列表
    probJump (row) {
      if(row.problemCount  == 0){
        this.$message({
          type:'warn',
          message:'主机正常'
        })
        return
      }
       console.log( row.name );
      this.$router.push({ 
        path: '/alarm/list', 
        params:  row.name 
        })
    },

    getContent (row, typeKey) {
      let dest = row.itemsList.find(item => {
        return item.key == typeKey
      })
      if(!dest){
        console.warn(dest, row.name, typeKey);
        return ''
      }
      let value = dest.lastvalue

      let unit = dest.units

      if (typeKey == this.TYPE.size_c_pfree) {
        value = 100 - value
      }

      if (typeKey == this.TYPE.cpu) {
        // value = Math.round(parseFloat(value)*100) / 100
        value = value+''
      }


      return value + unit


    },
    reSet () {
      this.queryForm = this.$options.data().queryForm
      this.init()
    },
    async init () {
      const res = await getList(this.queryForm)
      console.log(res);
      if (res.code == 20000) {

        this.tableData = res.data.records
        this.total = res.data.total
        console.log(JSON.stringify(this.tableData));
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(val);
    },
    handleSizeChange (val) {
      this.queryForm.page.size = val
      this.init()
    },
    handleCurrentChange (val) {
      this.queryForm.page.current = val
      this.init()
    },
    /**
     * 0 详情
     * 1 趋势
     */
    editUser (row, type) {
      console.log(row, type)
      if (type === 0) {
        this.$router.push({ name: 'detail', params: { id: row.hostid } })
        console.log("详情")
      } else {
        this.$router.push({ name: 'trend', params: { id: row.hostid } })
      }
    },
    handleClose () {
      this.addForm = this.$options.data().addForm
      this.init()
      this.dialogVisible = false
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate () { },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {
    this.init()
  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted () { }
}
</script>

<style lang="less" scoped>
/deep/.el-tag {
  width: 45px;
  padding: 0;
  display: inline-block;
  border-color: #d9ecff;
  text-align: center;
  height: 27px;
  line-height: 27px;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
}
.btnColor:hover {
  cursor: pointer;
}
.hawkContent {
  width: calc(100% - 40px);
  min-height: calc(100vh - 140px);
  background: #fff;
  padding: 20px;
  border-radius: 8px;

  .inputLabel {
    font-size: 14px;
    color: #333333;
  }

  .bottom-btns {
    float: right;
  }
}
</style>
